<!--
 * @FileDescription 填空标签
 * @Author lz
 * @Date 20230131 17:20:54
 * @LastEditors lz
 * @LastEditTime 20230131 17:20:54
-->
<template>
    <div class="lab_Box">
        <!-- <div class="box" @mouseover="choice" @mouseout="removeBox" @mouseup="release">
                            {{ state.remName }}
                        </div>
                        <img src="/structure/origin.png" class="origin">
                        <img class="connection" src="/structure/instructions_bg.png"> -->

        <div class="upperRight" v-if="Direction == 315">
            <img src="/structure/origin.png" class="origin">
            <div class="lineBox"></div>
            <div class="box" :id="`${props.Keys}`" style="text-align:center" @mouseover="choice" @mouseout="removeBox" @mouseup="release"
                @dragenter="" :class="state.RightAndWrong == 2 ? 'errs' :state.RightAndWrong == 1 ? 'exa': ''">
                <img class="DeleteOperation" src="/structure/deleteBtn.png" @click="DelOpera" v-if="state.remName != ''">
                <div class="tit">
                    {{ state.remName }}
                </div>
            </div>
            <!-- <img class="connection" src="/structure/instructions_bg.png"> -->
        </div>

        <div class="lowerRight" v-if="Direction == 45">
            <img src="/structure/origin.png" class="origin">
            <div class="lineBox"></div>
            <div class="box_lowerRight" :id="`${props.Keys}`" style="text-align:center" @mouseover="choice" @mouseout="removeBox"
            :class="state.RightAndWrong == 2 ? 'errs' :state.RightAndWrong == 1 ? 'exa': ''" @mouseup="release">
                <img class="DeleteOperation" src="/structure/deleteBtn.png" @click="DelOpera" v-if="state.remName != ''">
                <div class="tit">
                    {{ state.remName }}
                </div>
            </div>
            <!-- <img class="connection_lowerRight" src="/structure/lowerRight_lab.png"> -->
        </div>

        <div class="upperLeft" v-if="Direction == 225">
            <img src="/structure/origin.png" class="origin">
            <div class="lineBox"></div>
            <div class="box_upperLeft" :id="`${props.Keys}`" style="text-align:center" @mouseover="choice" @mouseout="removeBox"
            :class="state.RightAndWrong == 2 ? 'errs' :state.RightAndWrong == 1 ? 'exa': ''" @mouseup="release">
                <img class="DeleteOperation" src="/structure/deleteBtn.png" @click="DelOpera" v-if="state.remName != ''">
                <div class="tit">
                    {{ state.remName }}
                </div>
            </div>
            <!-- <img class="connection_upperLeft" src="/structure/upperLeft_lab.png"> -->
        </div>

        <div class="lowerLeft" v-if="Direction == 135">
            <img src="/structure/origin.png" class="origin">
            <div class="lineBox"></div>
            <div class="box_lowerLeft" :id="`${props.Keys}`" style="text-align:center" @mouseover="choice" @mouseout="removeBox"
            :class="state.RightAndWrong == 2 ? 'errs' :state.RightAndWrong == 1 ? 'exa': ''" @mouseup="release">
                <img class="DeleteOperation" src="/structure/deleteBtn.png" @click="DelOpera" v-if="state.remName != ''">
                <div class="tit">
                    {{ state.remName }}
                </div>
            </div>
            <!-- <img class="connection_lowerLeft" src="/structure/instructions_bg.png"> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, watch } from 'vue'
import { string } from 'vue-types';
import HomeContent from '../../HomeContent';
import MenuIndexData from '../../menu/MenuIndex';
import simulationData from '../simulationTraining';
const emit = defineEmits(["DelOperaLab", 'removeData', 'verify']);
const state = reactive({
    RightAndWrong: 0,
    value: '',
    rem: '',
    remName: '',
    constant1: 0,
    constant2: 0,
    constant3: 0,
    constant4: 0,
    H_constant4: 0,
});

const props = defineProps({
    remId: String,
    Direction: Number,
    ViewportPointX: String,
    ViewportPointY: String,
    Name: String,
    Length: Number,
    Keys: Number,
    indexs: {
        type: Number,
        default: () => 0
    },
})
function release() {
    console.log('松开');
    if (state.remName == '') {
        if (props.remId != '') {
            state.rem = props.remId as string
        } else {
            console.log('未选中目标');
        }
        if (state.rem != '') {
            state.remName = state.rem
            emit('removeData', state.remName);
            state.rem = ''
        }
    } else {
        console.log('已有目标');
    }
}

function removeBox() {
    console.log('移出');
}

//线长
let LinLength: string = `${props.Length}px`
//方向
let direction: string = `rotate(${props.Direction}deg) `



//左下X
let LLX = ref(`-${state.constant1 + (props.Length! * 0.7071)}px`)
//左下Y
let LLY: string = `${(props.Length! * 0.7071) + 8}px`
watch(() => state.constant1, (newVal, oldVal) => {
    if (newVal != oldVal) {
        LLX.value = `-${state.constant1 + (props.Length! * 0.7071) - 28}px`
    }
})


//225X
let LRX = ref(`-${(props.Length! * 0.7071)}px`)
//225Y
let LRY = ref(`-${(props.Length! * 0.7071)}px`)
watch(() => state.constant4, (newVal, oldVal) => {
    if (newVal != oldVal) {
        LRX.value = `-${state.constant4 + (props.Length! * 0.7071) - 28}px`
        LRY.value = `-${(props.Length! * 0.7071) + 34}px`
    }
})


//315X
let URX: string = `${4 + (props.Length! * 0.7071)}px`
//315Y
let URY: string = `-${32 + (props.Length! * 0.7071)}px`
//45X
let ULX: string = `${3 + (props.Length! * 0.7071)}px`
//45Y
let ULY: string = `${3 + (props.Length! * 0.7071)}px`

// 校验对错
function CheckRW() {
    if (HomeContent.Default.ApplicationType.value == '训练') {
        if (state.remName == props.Name) {
            emit('verify', true, props.indexs as number, state.remName);
            state.RightAndWrong = 1
        } else {
            state.RightAndWrong = 2
            emit('verify', false, props.indexs as number, state.remName);
        }
    } else if (HomeContent.Default.ApplicationType.value == '考核') {
        if (state.remName == props.Name) {
            emit('verify', true, props.indexs as number, state.remName);
        } else {
            emit('verify', false, props.indexs as number, state.remName);
        }
    }

}

function DelOpera() {
    emit('DelOperaLab', state.remName);
    state.remName = ''
    state.RightAndWrong = 0
}
function choice() {
    console.log('移入');
}

let Echo: any = []
onMounted(() => {
    if (simulationData.Default.trainingDatalist.value[simulationData.Default.subscript.value].IsSubmit) {
        Echo = simulationData.Default.historyList.get(simulationData.Default.subscript.value)
        state.remName = Echo[props.indexs].Name
    }

    if (props.Direction == 135) {
        let divW = document.getElementById(`${props.Keys}`);
        state.constant1 = divW!.offsetWidth
        // console.log(state.constant1);
    }
    if (props.Direction == 315) {
        let divW2 = document.getElementById(`${props.Keys}`);
        // console.log(divW2!.offsetWidth);
        state.constant2 = divW2!.offsetWidth
    }
    if (props.Direction == 45) {
        let divW3 = document.getElementById(`${props.Keys}`);
        // console.log(divW3!.offsetWidth);
        state.constant3 = divW3!.offsetWidth
    }
    if (props.Direction == 225) {
        let divW4 = document.getElementById(`${props.Keys}`);
        // console.log(divW4!.offsetWidth);
        state.constant4 = divW4!.offsetWidth
        state.H_constant4 = divW4!.offsetHeight
    }
});


//监听提交
watch(() => simulationData.Default.TriggerValue.value, (newVal, oldVal) => {
    if (newVal != oldVal) {
        CheckRW()
    }
})
</script>

<style scoped>
.lab_Box {
    position: absolute;
    left: v-bind(ViewportPointX);
    top: v-bind(ViewportPointY);
    transform: translate(-17px,-17px);
    text-align: center;
}

.Btn {
    position: absolute;
    font-size: 18px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 54px;
    width: 120px;
    height: 54px;
    background-image: url('/structure/btn_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.Btn:hover {
    color: #fff;
    background-image: url('/structure/btn_bg_select.png');
}

.submit {
    left: 888px;
    bottom: 90px;
}

.box {
    position: absolute;
    left: v-bind(URX);
    top: v-bind(URY);
    height: 60px;
    min-width: 190px;
    border: 24px solid;
    padding: 1px;
    border-image-source: url('/structure/label_bg.png');
    border-image-slice: 27 fill;
    text-align: center;
    display: flex;
    align-items: center;
}

.box_lowerRight {
    position: absolute;
    left: v-bind(ULX);
    top: v-bind(ULY);
    min-width: 190px;
    height: 60px;
    border: 24px solid;
    padding: 1px;
    border-image-source: url('/structure/label_bg.png');
    border-image-slice: 27 fill;
    text-align: center;
    display: flex;
    align-items: center;
}

.box_upperLeft {
    position: absolute;
    left: v-bind(LRX);
    top: v-bind(LRY);
    height: 60px;
    min-width: 190px;
    border: 24px solid;
    padding: 1px;
    border-image-source: url('/structure/label_bg.png');
    border-image-slice: 27 fill;
    text-align: center;
    display: flex;
    align-items: center;
}

.box_lowerLeft {
    position: absolute;
    left: v-bind(LLX);
    top: v-bind(LLY);
    height: 60px;
    border: 24px solid;
    min-width: 190px;
    padding: 1px;
    border-image-source: url('/structure/label_bg.png');
    border-image-slice: 27 fill;
    text-align: center;
    display: flex;
    align-items: center;
}

.tit {
    width: 100%;
    font-size: 14px;
    color: #FFFFFF;
    float: left;
    text-align: center;
    white-space: nowrap;
}

/* .connection {
    position: absolute;
    left: 10px;
    top: -14px;
    width: 224px;
}

.connection_lowerRight {
    position: absolute;
    left: 10px;
    top: 12px;
    width: 224px;
}

.connection_upperLeft {
    position: absolute;
    left: -206px;
    top: -14px;
    width: 224px;
}

.connection_lowerLeft {
    position: absolute;
    left: -206px;
    top: 12px;
    width: 224px;
    transform: rotate(180deg);
} */


.origin {
    width: 34px;
}

.DeleteOperation {
    width: 14px;
    height: 14px;
    position: absolute;
    right: -14px;
    top: -14px;
}

.errs {
    border-radius: 10px;
    box-shadow: 0px 0px 20px 6px red;
}
.exa{
    border-radius: 10px;
    box-shadow: 0px 0px 20px 6px rgb(91, 255, 91);
}
.lineBox {
    position: absolute;
    top: 16px;
    left: 16px;
    width: v-bind(LinLength);
    height: 1px;
    background-color: #2AE9FF;
    transform: v-bind(direction);
    transform-origin: 0% 50%;
}
</style>